<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     /* 
     rem（root element of font-size）  参照根元素html的字体大小  html{font-size:16px;}

     1rem = 16px (默认)  
     => 为了方便计算  1rem  = 100px  

     谷歌最小字体大小: 12px  
     大小12 ~ 10的倍数  10、100、1000....

     => rem适配: 让html根元素跟着我们设备的分辨率进行动态的改变 (html ： font-size)
     => 1.脚本: window.screen.width/ window.screen.height 
      750(设计稿)    window.screen.width   375     414
      100px              ？                50px    ？

      ？rem  = （window.screen.width / 750） * 100  
      技巧:  设计稿  /  100  =  rem的大小

     => 2.媒体查询:(区间范围)  320        360    375    384    400      414  640
     750                      21.33px    24px   25px   25.6    26.67   27.6 ...
     100
     @media (min-width:320){
         html{font-size:?}
     }
     @media (min-width:321) and (max-width:375px){
         html{font-size:?}
     }
     ....

     => 3.vw 动态 (京东 + 网易)  => 流行 
       font-size:100px;  =   ?? vw

       750   375 视口
       100   50px  网易
       40px  20px  京东

        1vw                    =   3.75px
        13.333333333333334vw   =   50px
        5.333333333333333vw    =   20px
     */
        html{
            font-size:13.333vw;
        }
       .box{
           /* w 160px h 160px */
           width:1.6rem;
           height:1.6rem;
           background-color: green;
       }



    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        // 针对750的设计稿
        function refreshRem() {
            var desW = 750,
                winW = document.documentElement.clientWidth,
                ratio = winW / desW;
            document.documentElement.style.fontSize = ratio * 100 + 'px';
        }
        refreshRem();
        window.addEventListener('resize', refreshRem);
    </script>
</body>

</html>